<template>
	<view class="y-step">
		<view class="y-step-list" v-for="(i,key) in value" :key="key">
			<view class="y-step-line"></view>
			<view class="y-step-box" style="width: 99%;">
				<slot :row="i"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:{}
		}
	}
</script>

<style scoped lang="scss">
.y-step{
	&-list{
		display: flex;
	}
	&-line{
		flex: 1;
		display: flex;
		justify-content: center;
		&::after{
			content: '';
			width: 1px;
			background-color: rgba(0,0,0,.2);
			height: 100%;
		}
		&::before{
			content: '';
			width: 20px;
			height: 20px;
			background: linear-gradient(45deg, rgb(123, 146, 255) 0%, rgb(67, 109, 255) 100%);
			border-radius: 50%;
			transform: translateX(calc(50% + 1px)) translateY(100%);
			box-shadow: 3px 3px 8px 0 rgba(0,0,0,.3);
		}
	}
	&-box{
		position: relative;
		min-height: 50px;
		background-color: #fff;
		box-shadow: 4px 4px 10px 0 rgba(0,0,0,.2),0 0 1px 0 rgba(0,0,0,.1);
		margin: 5px 10px 5px 30px;
		border-radius: 6px;
	}
}
</style>
